<style>
  .file {
        height: 33px;
        line-height: 33px;
        display: inline-block;
        cursor: pointer;
        outline: none;
        border: none;
        position: relative;
        *display: inline;
        cursor: pointer;
        background: transparent;
    }
    
    .file input {
        height: 33px;
        line-height: 33px;
        width: 60px;
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        filter: alpha(opacity=0);
        cursor: pointer;
        overflow: hidden;
        background: transparent;
    }
    
    .userManager .userContent {
        width: 100%;
        overflow: hidden;
        height: 100%;
    }
    
    .userManager .leftContent {
        width: 20%;
        float: left;
        border: 1px solid #ebeef5;
        height: 784px;
        overflow-x: hidden;
    }
    
    .userManager .leftContent .filter {
        width: 90%;
        display: block;
        margin: 10px auto;
    }
    
    .userManager .leftContent .el-input .el-input__inner {
        font-size: 14px;
    }
    
    .userManager .leftContent .el-tree__empty-block {
        min-height: 40px;
    }
    
    .userManager .leftContent .el-tree__empty-block .el-tree__empty-text {
        font-size: 14px;
    }
    
    .userManager .rightContent {
        width: 79%;
        float: right;
    }
    
    .userManager .rightContent .switchStyle span.el-switch__label--left {
        display: block;
        left: 7px;
    }
    
    .userManager .rightContent .switchStyle span.el-switch__label--right {
        left: -17px;
    }
    
    .userManager .label_table .el-dropdown span {
        color: #ff2d51;
        cursor: pointer;
    }
    
    .userManager .rightContent .el-dropdown-link {
        position: relative;
    }
    
    .userManager .rightContent .moveAll {
        width: 200px;
        height: 180px;
        padding: 5px 20px;
        background: #fff;
        position: absolute;
        bottom: 0;
        left: 85px;
        z-index: 999;
    }
    
    .userManager .rightContent .moveAll .el-tree {
        border: 1px solid #ccc;
        height: 180px;
        overflow-x: hidden;
    }
    
    .userManager .rightContent .moveAll .el-tree span {
        color: #333;
    }
    
    .content_body {
        display: flex;
        flex-direction: row;
    }
    
    .left_content {
        width: 20%;
        padding: 10px;
        border: 1px solid #bbc;
        min-height: 430px;
    }
    
    .right_content {
        width: 80%;
        flex-direction: column;
        padding: 0 10px;
    }
    
    .allDelete {
        text-align: center;
        color: #333;
        font-size: 14px;
        padding: 9px 5px;
    }
    
    .el-dropdown {
        vertical-align: top;
    }
    
    .el-dropdown+.el-dropdown {
        margin-left: 15px;
    }
    
    .el-icon-arrow-down {
        font-size: 12px;
    }
    
    .el-dropdown-link1 {
        border: 1px solid #bbc;
        padding: 5px;
        border-radius: 5px;
        color: #bbc !important;
        margin: 10px 0px 0px 10px;
    }
    
    .el-dialog {
        margin-top: 15vh;
        width: 40%;
    }
    
    .el-form-item__label {
        text-align: left;
    }
    
    .v-modal {
        position: absolute;
        background: #fff !important;
    }
    
    .el-select {
        width: 80px !important;
    }
    
    .el-input .el-input--suffix {
        width: 100px !important;
    }
    
    .el-dialog .el-input .el-input--suffix {
        width: 100px !important;
    }
    
    .el-tabs-report .el-select,
    .el-tabs-report .el-select .el-input,
    .el-tabs-report .el-select .el-input input,
    .el-cascader,
    .el-cascader .el-input,
    .el-cascader input {
        width: 100px !important;
    }
    
    .el-input .el-input--suffix .input {
        width: 100px !important;
    }
    
    .custom-tree-node i {
        /* display: inline-block; */
        position: absolute;
        right: 5px;
        font-size: 8px !important;
        background: url("../../assets/qudaoImg/slhRow.png");
        display: inline-block;
        width: 10px;
        height: 18px;
        margin-left: 30px;
        /*  */
    }
    
    .newLeftOrg {
        width: 120px !important;
    }
    
    .el-dialog .newP {
        margin-bottom: 10px;
        /* margin: 10px 0px; */
    }
    
    .el-dialog__header {
        display: none !important;
    }
    
    .el-dialog__body {
        padding: 10px !important;
    }
    
    .el-popover {
        min-width: 80px !important;
    }
    
    .el-popover p:hover {
        padding: 5px 0px;
        background-color: #B7D9FC;
    }
    
    .userManager .el-table--enable-row-hover .el-table__body tr:hover>td {
        background-color: #B7D9FC !important;
    }
    
    .userManager .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background-color: #B7D9FC;
    }
    
    .userManager .el-cascader-node.in-active-path,
    .el-cascader-node.is-active,
    .el-cascader-node.is-selectable.in-checked-path {
        color: #B7D9FC;
        font-weight: 700;
        background: #b2b2b2;
    }
    
    .userManager .el-tree-node__content:hover {
        background-color: #B7D9FC;
    }
    
    .el-cascader-node:not(.is-disabled):hover {
        background: #B7D9FC;
    }
    
    .el-tree-node__content:active {
        background-color: #B7D9FC !important;
    }
    
    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
        color: #4d95fd;
        font-weight: bold;
        background-color: #B7D9FC !important;
    }
    /* //使用的地方  不要加scoped */
    
    .el-tree-node.is-current>.el-tree-node__content {
        background-color: #2F8DFB !important;
        color: white;
    }
    
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: black;
    }
</style>

<template>
  <div class="userManager w944">
    <alert ref="alert"></alert>
    <deleteAlert ref="deleteAlert"></deleteAlert>
    <div class="label_top">
      <p>
        <i class="line"></i>用户管理
      </p>
      <b class="rightBtn" @click="rankYh">学员榜</b>
      <b class="rightBtn" @click="setYh">用户设置</b>
      <b class="rightBtn" @click="setGw">岗位设置</b>
    </div>
    <!-- 文本主体 -->
    <div class="content_body">
      <!-- 左边主体部分 -->
      <div class="left_content">
        <el-input placeholder="查找组织机构，部门" prefix-icon="el-icon-search" v-model="filterText"></el-input>

        <el-tree :data="newOrganization" @node-click="orgChoice" :default-expand-all="false" style="margin-top: 10px;"
          node-key='id' :current-node-key="currentNodekey" :default-checked-keys="defaultExpandedKeys"
          :default-expanded-keys="defaultExpandedKeys" highlight-current :props="defaultProps" :filter-node-method="filterNode"
          ref="leftTree">
          <span class="custom-tree-node" :class="{'active':isActive}" style="width:140px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;font-size: 12px;"
            slot-scope="{ node, data }">
            <span>
              <i :class="node.icon" style="background-repeat:no-repeat;" @click="orgDo(node)"></i>{{node.label}}
            </span>
          </span>
        </el-tree>

      </div>
      <!-- 右边主体部分 -->
      <div class="right_content">
        <div class="el-tabs-report">
          <a class="listOne" @click="createUser">新增员工</a>
          <el-select class="listTwo" style="right: 75% !important" @change="gradeRule" v-model="userGradeRule"
            placeholder="用户级别">
            <el-option label="用户级别" value=""></el-option>
            <el-option v-for="item in gradeRuleList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>

          <el-cascader class="listTwo" style="right: 60% !important" @change="areaChange" placeholder="选择地区" :options="address"
            :props="propArea" clearable>
          </el-cascader>

          <el-select class="th_2" style="right: 380px !important" v-model="status" placeholder="账号状态" @change="getTableList">
            <el-option label="账号状态" value=""></el-option>
            <el-option label="开启" value="1"></el-option>
            <el-option label="冻结" value="2"></el-option>
          </el-select>

          <div class="msearch" style="right: 108px !important">
            <input placeholder="请输入话题、学员名字……" v-model="search" />
            <a @click="getTableList"><img src="../../assets/qudaoImg/search.png" /></a>
          </div>

          <el-select class="th_2" style="right: 0px !important" v-model="mNull" placeholder="数据操作">
            <el-option label="导入数据" value="导入数据">
              <a class="listOne file"><input type="file" @change="importEntrance" id="articleImageFile">导入数据</a>
            </el-option>
            <el-option value="导出用户">
              <div @click="importDaoChu">导出用户</div>
            </el-option>
            <el-option value="下载模板">
              <div @click="">下载模板</div>
            </el-option>
          </el-select>
        </div>

        <el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="phone" label="账号" width=""></el-table-column>
          <el-table-column prop="nickname" label="用户名" width=""></el-table-column>
          <el-table-column prop="jobNum" label="工号" width=""></el-table-column>
          <el-table-column prop="organizationResultName" label="组织部分" style="text-align: left !important;" width="220"></el-table-column>
          <el-table-column prop="stationName" label="岗位" width=""></el-table-column>
          <el-table-column label="状态" width="">
            <template slot-scope="scope">
              <el-switch style="text-align:justify !important;" class="switchStyle" v-model="scope.row.status"
                active-color="#44cef6" inactive-color="#999" active-text="开启" inactive-text="关闭" :active-value="1"
                :inactive-value="2" @change="changeSwitch(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="">
            <template slot-scope="scope">
              <el-popover trigger="click" style="width: 100px;" placement="top">
                <p @click="toUserMsg(scope.row)">查看</p><br>
                <p @click="handleEdit(scope.row)">编辑</p><br>
                <p>
                  <el-popover placement="left-start" trigger="click">
                    <p>
                      <el-tree :data="organization" @node-click="orgChange" :props="defaultProps" style="height: 240px;">
                      </el-tree>
                    </p>
                    <p @click="orgMove(scope.row)" slot="reference"> 移动至></p>
                  </el-popover>
                </p><br>
                <p type="danger" @click="handleDelete(scope.row)">删除</p><br>
                <p @click="creditChange(scope.row)">变更学分</p>
                <div slot="reference" class="name-wrapper">
                  <img src="../../assets/qudaoImg/slhCol.png" />
                </div>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenyeMargin" style="display: flex;">
          <el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
          <el-button class="allDelete">
            <el-popover placement="top-start" style="width: 100px;" trigger="hover">
              <p @click="handleDeleteAll()">批量删除</p><br>
              <p>
                <el-popover placement="left-start" trigger="hover">
                  <p>
                    <el-tree :data="organization" @node-click="orgChange" :props="defaultProps" style="height: 240px;">
                    </el-tree>
                  </p>
                  <p slot="reference">批量移动至></p>
                </el-popover>
              </p><br>
              <p @click="changeSwitchStatus('2')">批量冻结账号</p><br>
              <p @click="changeSwitchStatus('1')">批量解冻账号</p>
              <el-button slot="reference">批量操作</el-button>
            </el-popover>
          </el-button>
          <div class="pag_block" style="margin-left: 30%;">
            <el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize"
              layout="prev, pager, next" :total="total"></el-pagination>
          </div>
        </div>

        <!-- 变更学分 -->
        <el-dialog title="变更学分" :visible.sync="dialogFormVisible">
          <p> 姓 名 ：{{nickname}}</p><br>
          <p>当前学分：{{credit}}</p><br>
          <el-form :model="dialog_form" style="text-align: left;">
            <el-form-item label="变更学分：" style="text-align: left;" :label-width="formLabelWidth">
              <el-input v-model="num" type="number" @change="handleChange" placeholder="
            追加学分输入：50 ，扣除学分输入：-50"
                autocomplete="off">
              </el-input>
            </el-form-item>
            <p>变更后学分：{{creditNum}}</p>
            <el-form-item label="备注：">
              <el-input v-model="remark" type="textarea" :rows="6" placeholder="请输入组织机构描述" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitDialogForm">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 左边栏，点击三个点出现的弹框 -->
        <el-dialog :visible.sync="centerDialogVisible" left style="position: fixed;top: 15vh;padding:0px; left: -350px;font-size: 14px;"
          width="6%">
          <p v-if="checkedOrgStatus == 0" @click="newOrg('0')">新增组织</p>
          <p v-if="checkedOrgStatus != 0" class="newP" @click="newOrg('')">新增子组织</p>
          <p v-if="checkedOrgStatus != 0" class="newP" @click="editOrg">编辑组织</p>
          <p v-if="checkedOrgStatus == 2" class="newP">
            <el-popover placement="left-start" trigger="click">
              <p>
                <el-tree :data="organization" @node-click="orgMove" :props="defaultProps" style="height: 240px;">
                </el-tree>
              </p>
              <p slot="reference"> 变更隶属 》 </p>
            </el-popover>
          </p>
          <p v-if="checkedOrgStatus != 0" class="newP" @click="deleteOrg">删除组织</p>
        </el-dialog>

        <!-- 新增组织弹框 -->
        <el-dialog title="新增组织" :visible.sync="newOrgVisible">
          <div v-if="checkedOrgStatus != 0 && checkedOrgStatus != 1 && editOrgStatus != 2" style="margin: 10px 0px;display: flex;">
            <p style="margin-left: 20px;">上级组织：</p>
            <p v-if="checkedOrgStatus !=4" style="padding-left: 30px;">{{choiceOrgName}}</p>
          </div>

          <div v-if="editOrgStatus == 2" style="margin: 10px 0px;display: flex;">
            <p style="margin-left: 20px;">上级组织：</p>
            <p style="padding-left: 30px;">{{parentOrgName}}</p>
          </div>

          <el-form :model="dialog_form" style="margin-top: 10px;">
            <el-form-item label="组织名称：" :label-width="formLabelWidth">
              <el-input v-model="dialog_form.name" placeholder="请输入组织名称" autocomplete="off"></el-input>
            </el-form-item>
            <div v-if="editOrgStatus !=0 && editOrgStatus !=2" style="margin: 20px 0px;display: flex;">
              <p style="margin-left: 20px;">组织编号：</p>
              <p style="padding-left: 30px;">{{orgNum}}</p>
            </div>
            <el-form-item label="所在地区：" :label-width="formLabelWidth">
              <el-cascader v-model="dialog_form.region" @change="handleChange" placeholder="请选择地区" class="listTwo"
                :options="address" :props="propArea" clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="组织描述：" :label-width="formLabelWidth">
              <el-input v-model="dialog_form.describes" type="textarea" :rows="6" placeholder="请输入组织机构描述" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="newOrgVisible = false">取 消</el-button>
            <el-button type="primary" @click="newOrgSubmitDialog">确 定</el-button>
          </div>
        </el-dialog>

        <!-- 编辑组织弹框 editOrgVisible -->
        <el-dialog title="编辑组织" :visible.sync="editOrgVisible">
          <div v-if="editOrgStatus == 2" style="margin: 10px 0px;display: flex;">
            <p style="margin-left: 20px;">上级组织：</p>
            <p style="padding-left: 30px;">{{parentOrgName}}</p>
          </div>

          <el-form :model="dialog_form" style="margin-top: 10px;">
            <el-form-item label="组织名称：" :label-width="formLabelWidth">
              <el-input v-model="editOrgName" placeholder="请输入组织名称" autocomplete="off"></el-input>
            </el-form-item>
            <div v-if="editOrgStatus !=0 && editOrgStatus !=2" style="margin: 20px 0px;display: flex;">
              <p style="margin-left: 20px;">组织编号：</p>
              <p style="padding-left: 30px;">{{orgNum}}</p>
            </div>
            <el-form-item label="所在地区：" :label-width="formLabelWidth">
              <el-cascader v-model="city" @change="cityArrChange" placeholder="请选择地区" class="listTwo" :options="address"
                :props="propArea" clearable>
              </el-cascader>
            </el-form-item>
            <el-form-item label="组织描述：" :label-width="formLabelWidth">
              <el-input v-model="dialog_form.describes" type="textarea" :rows="6" placeholder="请输入组织机构描述" autocomplete="off">
              </el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="newOrgVisible = false">取 消</el-button>
            <el-button type="primary" @click="EditOrgSubmitDialog">确 定</el-button>
          </div>
        </el-dialog>

      </div>
    </div>
  </div>
</template>
<script>
  import alert from "../../components/Alert.vue";
  import deleteAlert from "../../components/deleteAlert.vue";
  let id = 0;
  export default {
    data() {
      return {
        search: "",
        nickname: '',
        credit: '',
        num: '',
        mNull: '',
        creditNum: 0,
        defaultExpandedKeys: [],
        remark: '',
        userid: '',
        userGradeRule: '',
        moveFatherId: '',
        moveChildenId: '',
        changeCredit: '',
        organizationId: '',
        switchVal: true,
        centerDialogVisible: false,
        dialogFormVisible: false, //弹框开关
        newOrgVisible: false,
        editOrgVisible: false,
        tableData: [],
        newOrgId: [],
        gradeRuleList: [],
        pagesize: 15,
        currentpage: 1,
        total: 1,
        startCredit: '',
        credit: '',
        roleLabel: '',
        status: '',
        organization: [],
        checkedOrgStatus: '1', //0为所有组织，1为一级组织，2为三级组织
        editOrgStatus: '0',
        newOrganization: [],
        proviceid: '', //省id
        cityid: '', //市id
        regionid: '', //区id
        editProviceid: '', //edit省id
        editCityid: '', //edit市id
        editRegionid: '', //edit区id
        editId: '',
        editOrgName: '',
        address: [],
        clickNum: '0',
        propArea: {
          value: 'id',
          label: 'name',
          children: 'list',
          // checkStrictly: true,
        },
        defaultProps: {
          label: 'name',
          children: 'childrenList',
        },
        dialog_form: {
          name: '',
          region: '',
          describes: ''
        },
        formLabelWidth: '120px',
        filterText: '',
        choiceOrgName: '',
        orgMsg: '',
        parentOrgName: '',
        orgNum: '',
        delectType: '',
        city: [],
        cityArr: [],
        optionProps: {
          value: 'id',
          label: 'name',
          children: 'list'
        },
        choiceOrgId: '',
        multipleSelection: '',
        newAddParentOrgName: '',
        choosedRole: [],
        currentNodekey: "", //默认选中的节点树
        isActive: false,
      };

    },
    methods: {
      getParams() {
        if (this.$route.params.id) {
          this.organizationId = this.$route.params.id;
          // this.filterText = this.$route.params.id;
          console.log('--filterText--', this.$route.params)
          this.currentNodekey = this.$route.params.id;
          this.defaultExpandedKeys.push(this.$route.params.id)
          this.$refs.leftTree.setCurrentKey(this.$route.params.id);
          // this.$refs.leftTree.setCurrentNode(this.$route.params.id)
          this.$refs.leftTree.setCheckedKeys(this.defaultExpandedKeys); //获取已经设置的资源后渲染
          this.$refs.leftTree.getCheckedNodes(this.$route.params.id)
        }
      },

      orgChoice(data, node, self) {
        this.organizationId = data.id;
        let key = this.$refs.leftTree.getCurrentKey();
        let returnData = {
          'data': data,
          'key': key
        }

        console.log('--data----', data)
        console.log('--node----', node)
        console.log('--self----', self)

        this.getTableList()
      },


      handleChange(val) {
        this.creditNum = parseInt(this.num) + parseInt(this.credit);
      },
      cityArrChange(data) {
        this.proviceid = data[0];
        if (data[1] != undefined) {
          this.cityid = data[1];
        } else {
          this.cityid = '';
        };
        if (data[2] != undefined) {
          this.regionid = data[2];
        } else {
          this.regionid = '';
        };
      },

      //  批量移动用户
      orgChange(val) {
        this.moveChildenId = val.id
        var s = {
          ids: this.multipleSelection, //用户id集合
          organizationId: val.id, //组织机构id
        };
        this.$ajax({
          url: this.$root.jifuUrl + "/batchMove",
          method: 'POST',
          data: this.qs.stringify(s),
          success: res => {
            if (res.data.code == 200) {
              // this.$router.go(0);
              this.$router.go(0);
            }
          }
        });
      },
      // 新增组织
      newOrg(val) {
        this.newOrgVisible = true;
        if (val) {
          this.pid = val;
        }
        this.editOrgStatus = '2';
        this.parentOrgName = this.newAddParentOrgName;
        this.editOrgName = ''
        console.log('--新增组织--', val)
      },
      newOrgSubmitDialog() {
        if (this.dialog_form.name.length > 20) {
          this.failText = '名称不能超过20个字';
          this.$rootFunction().deleteResFail();
        } else {
          var s = {
            name: this.dialog_form.name,
            pid: this.pid,
            proviceid: this.dialog_form.region[0],
            cityid: this.dialog_form.region[1],
            regionid: this.dialog_form.region[2],
            describes: this.dialog_form.describes,
            rootcompanyid: '1'
          };
          console.log('--addOrganization--s--', s)
          this.$ajax({
            url: this.$root.jifuUrl + "/addOrganization",
            method: 'POST',
            data: this.qs.stringify(s),
            success: res => {
              if (res.data.code == 200) {
                this.newOrgVisible = false;
                this.choiceOrgName = '';
                this.$router.go(0);
              }
            }
          });
        }
      },
      EditOrgSubmitDialog() {
        if (this.dialog_form.name.length > 20) {
          this.failText = '名称不能超过20个字';
          this.$rootFunction().deleteResFail();
        } else {
          var s = {
            name: this.editOrgName,
            id: this.editId,
            proviceid: this.editProviceid,
            cityid: this.editCityid,
            regionid: this.editRegionid,
            describes: this.dialog_form.describes,
            rootcompanyid: '1'
          };
          this.$ajax({
            url: this.$root.jifuUrl + "/updateOrganization",
            method: 'POST',
            data: this.qs.stringify(s),
            success: res => {
              if (res.data.code == 200) {
                this.editOrgVisible = false;
                this.choiceOrgName = '';
                this.$router.go(0);
              }
            }
          });
        }
      },
      // 编辑组织
      editOrg(val) {
        this.editOrgVisible = true;
        this.editOrgStatus = '1';
        if (!this.newOrgId.includes(this.organizationId)) {
          this.editOrgStatus = '2';
        }
        this.$ajax({
          url: this.$root.jifuUrl + "/getOrganizationById?id=" + this.organizationId,
          success: res => {
            if (res.data.code == 200) {
              this.orgMsg = res.data.data
              this.orgNum = res.data.data.no;
              this.dialog_form = res.data.data;
              this.editProviceid = res.data.data.proviceid;
              this.editCityid = res.data.data.cityid;
              this.editRegionid = res.data.data.regionid;
              this.editId = res.data.data.id
              this.editOrgName = res.data.data.name
            }
          }
        });
      },
      // 删除组织
      deleteOrg() {
        this.delectType = 'org';
        this.transitionRow = this.orgMsg;
        this.$rootFunction().rootDelete();

      },
      orgMove(val) {
        // this.moveFatherId 
        this.choiceOrgId = val.id;
        this.multipleSelection = val.id;
        var s = {
          id: this.organizationId,
          pid: val.id,
        };
        console.log('---移动组织--参数-', s)
        this.$ajax({
          url: this.$root.jifuUrl + "/moveOrganization",
          method: 'POST',
          data: this.qs.stringify(s),
          success: res => {
            if (res.data.code == 200) {
              this.$router.go(0);
            }
          }
        });
      },

      //左边栏操作组织
      orgDo(val) {
        this.clickNum = '1';
        this.parentOrgName = val.data.pname
        this.newAddParentOrgName = val.data.name
        this.pid = val.data.id
        console.log('---左边栏操作组织--', val.data)
        console.log('---左边栏操作组织-this.pid-', this.pid)
        if (val.data.id == '0') {
          this.checkedOrgStatus = '0'
        } else if (this.newOrgId.includes(val.data.id)) {
          this.checkedOrgStatus = '1';
          this.choiceOrgName = val.data.name;
          this.orgMsg = val.data
        } else {
          this.checkedOrgStatus = '2';
          this.choiceOrgName = val.data.name;
          this.orgMsg = val.data
        }

        this.centerDialogVisible = true
        // var t = this;
      },

      // 地区选择后数据的回调
      areaChange(value) {
        console.log('value[1]==', value[1]);
        this.region = value[value.length - 1];
        this.proviceid = value[0];
        this.cityid = value[1];
        if (value[2]) {
          this.regionid = value[2];
        }
        this.getTableList()
      },

      gradeRule(val) {
        if (val == '1') {
          this.credit = '1000';
          this.startCredit = '0';
        } else if (val == '2') {
          this.credit = '1500';
          this.startCredit = '1000';
        } else if (val == '3') {
          this.credit = '2000';
          this.startCredit = '1500';
        } else if (val == '4') {
          this.credit = '2500';
          this.startCredit = '2000';
        }
        this.getTableList()
      },

      // 获取所有用户等级
      getGradeRuleList() {
        this.$ajax({
          url: this.$root.jifuUrl + "/getGradeRuleList?rootcompanyid=1",
          success: res => {
            if (res.data.code == 200) {
              this.gradeRuleList = res.data.data
            }
          }
        });
      },
      // 取所有的 省市区数据
      getProviceCityRegionInfo() {
        this.$ajax({
          url: this.$root.jifuUrl + "/getProviceCityRegionInfo",
          success: res => {
            if (res.data.code == 200) {
              this.address = res.data.data
            }
          }
        });
      },

      creditChange(val) {
        this.dialogFormVisible = true;
        this.nickname = val.nickname;
        this.credit = val.credit;
        this.userid = val.id;

      },
      // 变更学分弹框提交
      submitDialogForm() {
        var s = {
          userid: this.userid,
          giveBackCredit: this.creditNum,
          remark: this.remark,
        };
        this.$ajax({
          url: this.$root.jifuUrl + "/updateUserCredit",
          method: 'POST',
          data: this.qs.stringify(s),
          success: res => {
            if (res.data.code == 200) {
              this.dialogFormVisible = false;
              this.$router.go(0);
            }
          }
        });
      },

      // 组织机构结构
      getOrganizationInfo() {
        this.$ajax({
          url: this.$root.jifuUrl + "/getOrganizationInfo?proviceid=" + this.proviceid + '' + '&cityid=' + '' +
            '&regionid=' + '' + '&rootcompanyid=' + 1,
          method: 'GET',
          data: {},
          success: res => {
            if (res.data.code == 200) {
              this.organization = res.data.data;
              var s = {
                childrenList: res.data.data,
                cityName: '',
                id: '0',
                name: '所有机构',
                icon: ''
              }
              var arr = [];
              arr.push(s)
              // console.log('--所有机构-arr-', arr)
              this.newOrganization = arr
              // this.newOrganization = res.data.data;
              for (let i = 0; i < res.data.data.length; i++) {
                this.newOrgId.push(res.data.data[i].id)
              }
            }
          }
        });
      },


      getTableList() {
        if (this.clickNum != '1') { //this.clickNum 不不为0说明点击的是旁边的图片
          this.$ajax({
            url: this.$root.jifuUrl + "/getUserByOrganizationId?" + 'page=' + this.currentpage + '&num=' + this.pagesize +
              '&organizationId=' + this.organizationId + '&proviceid=' + this.proviceid + '&cityid=' + this.cityid +
              '&regionid=' + this.regionid + '&status=' + this.status +
              '&startCredit=' + this.startCredit + '&credit=' + this.credit + '&roleLabel=' + this.roleLabel +
              '&rootcompanyid=1&name=' + this.search,
            method: 'GET',
            data: {},
            success: res => {
              if (res.data.code == 200) {
                this.tableData = res.data.data.list;
                this.total = res.data.data.pageParam.items;
              }
            }
          });
        }
      },

      changeSwitchStatus(val) {
        var s = {
          id: this.multipleSelection,
        };
        if (val == 1) {
          this.$ajax({
            url: this.$root.jifuUrl + "/openUser",
            method: 'POST',
            data: this.qs.stringify(s),
            success: res => {
              if (res.data.code == 200) {
                this.$router.go(0);
              }
            }
          });
        } else if (val == 2) {
          this.$ajax({
            url: this.$root.jifuUrl + "/closeUser",
            method: 'POST',
            data: this.qs.stringify(s),
            success: res => {
              if (res.data.code == 200) {
                this.$router.go(0);
              }
            }
          });
        }
      },

      changeSwitch(row) {
        var s = {
          id: row.id,
        };
        if (row.status == 1) {
          this.$ajax({
            url: this.$root.jifuUrl + "/openUser",
            method: 'POST',
            data: this.qs.stringify(s),
            success: res => {
              if (res.data.code == 200) {
                this.$router.go(0);
              }
            }
          });
        } else if (row.status == 2) {
          // var s={id:row.id,status:2};
          this.$ajax({
            url: this.$root.jifuUrl + "/closeUser",
            method: 'POST',
            data: this.qs.stringify(s),
            success: res => {
              if (res.data.code == 200) {
                this.$router.go(0);
              }
            }
          });
        }
      },

      toUserMsg(row) {
        localStorage.setItem('userid', row.id)
        this.$router.push({
          name: 'userMsg',
          params: {
            id: row.id
          }
        })
      },

      handleEdit(row) {
        this.$ajax({
          url: this.$root.jifuUrl + "/getUserById?id=" + row.id,
          headers: {
            'ContentType': 'application/json; charset=utf-8'
          },
          success: res => {
            if (res.data.code == 200) {
              this.$router.push({
                name: 'createUser',
                params: {
                  type: 'edit'
                }
              })
              this.$root.userMsg = res.data.data;
            } else {}
          }
        });
      },

      toggleSelection(rows) {
        console.log('--toggleSelection--', row)
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
          })
          this.allSelect = !this.allSelect;
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = [];
        for (var i = 0; i < val.length; i++) {
          this.multipleSelection.push(val[i].id)
        }
        this.multipleSelection = this.multipleSelection.join(",");
      },

      handleDelete(row) {
        this.delectType = 'user';
        this.transitionRow = row;
        this.$rootFunction().rootDelete();
      },

      handleDeleteAll() {
        this.delectType = 'user';
        this.$rootFunction().rootDeleteAll();
      },

      deleteSubmit() {
        console.log('---删除---')
        if (this.delectType == 'user') {
          var s = {
            id: this.transitionRow.id
          };
          this.$ajax({
            url: this.$root.jifuUrl + "/deleteUser",
            method: 'POST',
            data: this.qs.stringify(s),
            success: res => {
              if (res.data.code == 200) {
                this.$rootFunction().deleteResSuccess();
              } else {
                this.failText = res.data.message;
                this.$rootFunction().deleteResFail();
              }
            }
          });
        } else if (this.delectType == 'org') {
          var s = {
            ids: this.transitionRow.id
          };
          this.$ajax({
            url: this.$root.jifuUrl + "/deleteOrganization",
            method: 'POST',
            data: this.qs.stringify(s),
            success: res => {
              if (res.data.code == 200) {
                this.$rootFunction().deleteResSuccess();
              } else {
                this.failText = res.data.message;
                this.$rootFunction().deleteResFail();
              }
            }
          });
        }

      },

      handleCurrentChange(value) {
        this.currentpage = value;
        this.getTableList();
      },
      rankYh() {
        this.$router.push({
          name: 'rankYh'
        })
      },
      setYh() {
        this.$router.push({
          name: 'userClassification'
        })
      },
      setGw() {
        this.$router.push({
          name: 'jobsManager'
        })
      },
      createUser() {
        this.$router.push({
          path: "/createUser"
        });
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },

      //导入功能
      importEntrance(e) {
        var formData = new FormData();
        var name = $("#articleImageFile").val();
        formData.append("file", $("#articleImageFile")[0].files[0]);
        formData.append("file", name); //这个地方可以传递多个参数
        $.ajax({
          url: this.$root.jifuUrl +
            "/importUserInfo?" +
            "rootcompanyid=1",
          headers: {
            Authorization: this.$root.userInfoMsg.sessionId
          },
          type: "POST",
          async: false,
          data: formData,
          processData: false,
          contentType: false,
          success: res => {
            if (res.code == 200) {
              this.$refs.alert.show({
                alertText: "导入成功",
                alertSubmit: function() {
                  alertStatus: 0;
                }
              });
              setTimeout(() => {
                this.$router.go(0);
              }, 2000);
            } else {
              this.failText = res.data.message;
              this.$rootFunction().deleteResFail();
            }
          }
        });
      },
      importDaoChu() {
        this.axios({
            method: "POST",
            url: this.$root.jifuUrl +
              "/exportUserInfo?" +
              "rootcompanyid=1",
            headers: {
              Authorization: this.$root.userInfoMsg.sessionId
            },
            responseType: "blob"
          })
          .then(res => {
            var blob = new Blob([res], {
              type: "application/vnd.ms-excel;charset=utf-8"
            });
            var downloadElement = document.createElement("a");
            var href = window.URL.createObjectURL(blob); //创建下载的链接
            downloadElement.href = href;
            downloadElement.download = "导出文件.xls"; //下载后文件名
            document.body.appendChild(downloadElement);
            downloadElement.click(); //点击下载
            document.body.removeChild(downloadElement); //下载完成移除元素
            window.URL.revokeObjectURL(href); //释放掉blob对象
          })
          .catch(error => {
            this.failText = res.data.message;
            this.$rootFunction().deleteResFail();
          });
      }
    },

    watch: {
      filterText(val) {
        this.$refs.leftTree.filter(val);
      }
    },

    components: {
      alert,
      deleteAlert
    },
    mounted() {
      this.getParams();
      this.getOrganizationInfo();
      this.getTableList();
      this.getGradeRuleList();
      this.getProviceCityRegionInfo();

      // var _levelname = document.getElementsByClassName("el-tree-node__content");  //levelname是上面的最底层节点的名字，查询，新增。。
      // console.log(_levelname);
      // setTimeout(function() {  //等到树都加载完了再去执行的这里
      //     for (var i = 0; i < _levelname.length; i++) {
      //         _levelname[i].parentNode.style = ':hover';   //最底层的节点，包括多选框和名字都让他左浮动
      //     }
      // }, 2000)

    }
  };
</script>
